<template>
  <div class="corneal">
    <el-col class="col1" style="margin-right: 5%;margin-left: 5%">
      <el-card class="card2" style="width: 100%">
        <el-row class="annotation">
          <span>1.点击上传按钮选择要上传的图片</span>
          <span>2.依次点击"图像增强"，"角膜神经分割"和"弯曲度分级"执行对应操作</span>
        </el-row>
        <el-row class="body2">
          <el-col class="input">
            <div class="demo-image__preview">
              <el-image
                :src="url_org"
                class="image"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_org]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error">
                    <el-button
                      style=""
                      v-show=true
                      type="primary"
                      :loading="load"
                      class="download_bt"
                      icon="el-icon-caret-right"
                      v-on:click="upload"
                    >
                      上传图像
                      <input
                        ref="upload"
                        style="display: none"
                        accept="image/*"
                        name="file"
                        type="file"
                        @change="update"
                      />
                    </el-button>
                  </div>
                </div>
              </el-image>
            </div>
            <div class="info_1">
                <span style="color: black; letter-spacing: 4px; padding-bottom: 0"
                >原始图片</span
                >
            </div>
          </el-col>
          <el-col class="input">
            <div class="demo-image__preview">
              <el-image
                :src="url_enh"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_enh]"
                fit
              >
                <div slot="error">
                  <div slot="placeholder" class="error">
                  </div>
                </div>
              </el-image>
            </div>
            <div class="info_1" style="margin-bottom: 1%">
              <span style="color: black; letter-spacing: 4px; padding-bottom: 0"
              >增强结果</span
              >
            </div>
          </el-col>
          <el-row class="annotation"></el-row>
        </el-row>
        <el-row class="annotation">
          <span>注：分割任务CPU执行速度约1分钟左右，请耐心等待</span>
        </el-row>
      </el-card>
      <el-card class="card1" style="width: 100%">
        <el-col class="body1">
          <el-col class="button">
            <el-row class="chosen" style="margin-top: 0">
              <el-button
              style=""
              v-show=true
              type="primary"
              :loading="load"
              class="run_bt"
              icon="el-icon-caret-right"
              v-on:click="enh"
            >
              图像增强
            </el-button>
              <span> 模型选择：</span>
              <el-radio v-model="picked" label="One">stillgan</el-radio>
            </el-row>
            <el-row class="chosen">
              <el-button
              style=""
              v-show=true
              type="primary"
              :loading="load"
              class="run_bt"
              icon="el-icon-caret-right"
              v-on:click="seg"
            >
              角膜神经分割
            </el-button>
              <span>模型选择： </span>
              <el-radio v-model="seg_pick" label="One">CS-Net</el-radio>
              <el-radio v-model="seg_pick" label="Two">nerveformer</el-radio>
            </el-row>
            <el-row class="chosen">
              <el-button
                style=""
                v-show=true
                type="primary"
                :loading="load"
                class="run_bt"
                icon="el-icon-caret-right"
                v-on:click="grade"
              >
                弯曲度分级
              </el-button>
              <span>模型选择： </span>
              <el-radio v-model="pick3" label="One">DeepGrading</el-radio>
            </el-row>
            <!-- <a :href='"http://114.55.245.149:5001/download/nerve"' style="margin-top: 5%">点击下载</a> -->

            <a :href='"http://192.168.31.200:50001/download/nerve"' style="margin-top: 5%">点击下载</a>
          </el-col>
        </el-col>
      </el-card>
    </el-col>
    <el-col class="col2">
      <el-card class="result_card" >
        <el-row class="body3">
          <el-col class="result">
            <div class="o-image__preview">
              <el-image
                :src="url_seg_org"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_seg_org]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="info_2">
                                <span style="color:black; padding-bottom: 0"
                                >原图：角膜神经分割结果</span
                                >
            </div>
            <div class="o-image__preview">
              <el-image
                :src="url_seg2_org"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_seg2_org]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="info_2">
                                <span style="color:black; padding-bottom: 0"
                                >原图：弯曲度分级 {{this.level_org}}级</span><br>
                                <span>模型注意力热度血管投影</span>
            </div>
            <div class="o-image__preview">
              <el-image
                :src="url_grade_org"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_grade_org]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="info_2">
                                <span style="color:black; padding-bottom: 0; margin-bottom: 3%;"
                                >原图：弯曲度分级</span
                                ><br>
                                <span>模型注意力热度区域投影</span>
            </div>
            <el-image :src="require('@/assets/nerve.png')" style="width: 60%; margin-top: -1%"></el-image>
          </el-col>
          <el-col class="result">
            <div class="o-image__preview">
              <el-image
                :src="url_seg_enh"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_seg_enh]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="info_2">
                                <span style="color:black; padding-bottom: 0;"
                                >增强图：角膜神经分割结果</span
                                >
            </div>
            <div class="o-image__preview">
              <el-image
                :src="url_seg2_enh"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_seg2_enh]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="info_2">
                                <span style="color:black; padding-bottom: 0"
                                >增强图：弯曲度分级 {{this.level_enh}}级</span
                                ><br>
                                <span>模型注意力热度血管投影</span>
            </div>
            <div class="o-image__preview">
              <el-image
                :src="url_grade_enh"
                class="image_1"
                style="border-radius: 3px 3px 0 0;"
                :preview-src-list = "[url_grade_enh]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="info_2">
                               <span style="color:black; padding-bottom: 0"
                               >增强图：弯曲度分级</span
                               ><br>
                               <span>模型注意力热度区域投影</span>
            </div>
          </el-col>
          <!--          <el-row class="row">
                      <el-col class="pic" style="margin-right: 20%">
                        <div class="o-image__preview">
                          <el-image
                            :src="url_seg_org"
                            class="image_1"
                            style="border-radius: 3px 3px 0 0;"
                            :preview-src-list = "[url_seg_org]"
                          >
                            <div slot="error">
                              <div slot="placeholder" class="error"></div>
                            </div>
                          </el-image>
                        </div>
                        <div class="info_2">
                                <span style="color:black; letter-spacing: 4px; padding-bottom: 0"
                                >原始图片角膜分割</span
                                >
                        </div>
                      </el-col>
                      <el-col class="pic">
                        <div class="o-image__preview">
                          <el-image
                            :src="url_seg_enh"
                            class="image_1"
                            style="border-radius: 3px 3px 0 0;"
                            :preview-src-list = "[url_seg_enh]"
                          >
                            <div slot="error">
                              <div slot="placeholder" class="error"></div>
                            </div>
                          </el-image>
                        </div>
                        <div class="info_2">
                                <span style="color:black; padding-bottom: 0"
                                >增强图片角膜分割</span
                                >
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="row">
                      <el-col class="pic" style="margin-right: 20%">
                        <div class="o-image__preview">
                          <el-image
                            :src="url_seg2_org"
                            class="image_1"
                            style="border-radius: 3px 3px 0 0;"
                            :preview-src-list = "[url_seg2_org]"
                          >
                            <div slot="error">
                              <div slot="placeholder" class="error"></div>
                            </div>
                          </el-image>
                        </div>
                        <div class="info_2">
                                <span style="color:black; letter-spacing: 4px; padding-bottom: 0"
                                >原始图片角膜分级分割</span
                                >
                        </div>
                      </el-col>
                      <el-col class="pic">
                        <div class="o-image__preview">
                          <el-image
                            :src="url_seg2_enh"
                            class="image_1"
                            style="border-radius: 3px 3px 0 0;"
                            :preview-src-list = "[url_seg2_enh]"
                          >
                            <div slot="error">
                              <div slot="placeholder" class="error"></div>
                            </div>
                          </el-image>
                        </div>
                        <div class="info_2">
                                <span style="color:black; letter-spacing: 4px; padding-bottom: 0"
                                >增强图片角膜分级分割</span
                                >
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="row">
                      <el-col class="pic" style="margin-right: 20%">
                        <div class="o-image__preview">
                          <el-image
                            :src="url_grade_org"
                            class="image_1"
                            style="border-radius: 3px 3px 0 0;"
                            :preview-src-list = "[url_grade_org]"
                          >
                            <div slot="error">
                              <div slot="placeholder" class="error"></div>
                            </div>
                          </el-image>
                        </div>
                        <div class="info_2">
                                <span style="color:black; letter-spacing: 4px; padding-bottom: 0"
                                >原始图片角膜分级</span
                                >
                        </div>
                      </el-col>
                      <el-col class="pic">
                        <div class="o-image__preview">
                          <el-image
                            :src="url_grade_enh"
                            class="image_1"
                            style="border-radius: 3px 3px 0 0;"
                            :preview-src-list = "[url_grade_enh]"
                          >
                            <div slot="error">
                              <div slot="placeholder" class="error"></div>
                            </div>
                          </el-image>
                        </div>
                        <div class="info_2">
                                <span style="color:black; letter-spacing: 4px; padding-bottom: 0"
                                >增强图片角膜分级</span
                                >
                        </div>
                      </el-col>
                    </el-row>-->
        </el-row>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      // server_url: 'http://114.55.245.149:5001',
      server_url: 'http://192.168.31.200:50001',
      // server_url: 'http://localhost:5001',
      // server_url: 'http://127.0.0.1:7899',
      picked: 'One',
      seg_pick: 'One',
      pick3: 'One',
      url_org: '',
      url_enh: '',
      url_seg_org: '',
      url_seg_enh: '',
      url_seg2_org: '',
      url_seg2_enh: '',
      url_grade_org: '',
      url_grade_enh: '',
      load: false,
      level_org: '',
      level_enh: ''
    }
  },
  methods: {
    upload () {
      this.$refs.upload.click()
    },
    update (e) {
      let file = e.target.files[0]
      let param = new FormData()
      param.append('file', file, file.name)
      // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      console.log(param.get('file'))
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios
        .post(this.server_url + '/upload/nerve', param, config)
        .then(
          res => {
            this.url_org = this.server_url + '/tmp/nerve/org.jpg'
            console.log(this.url_org)
          }
        )
    },
    enh () {
      this.load = true
      let param = new FormData()
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios
        .post(this.server_url + '/nerve/enh_' + this.picked, param, config)
        .then(
          res => {
            this.url_enh = this.server_url + '/tmp/nerve/enh.png'
            this.load = false
          }
        )
    },
    seg () {
      this.load = true
      let param = new FormData()
      console.log('ill')
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios
        .post(this.server_url + '/nerve/seg_' + this.seg_pick, param, config)
        .then(
          res => {
            this.url_seg_org = this.server_url + '/tmp/nerve/seg_org.png'
            this.url_seg_enh = this.server_url + '/tmp/nerve/seg_enh.png'
            this.load = false
          }
        )
    },
    grade () {
      this.load = true
      let param = new FormData()
      console.log('ill')
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios
        .post(this.server_url + '/nerve/grade_' + this.pick3, param, config)
        .then(
          res => {
            this.url_seg2_org = this.server_url + '/tmp/nerve/seg2_org.png'
            this.url_seg2_enh = this.server_url + '/tmp/nerve/seg2_enh.png'
            this.url_grade_org = this.server_url + '/tmp/nerve/grade_org.png'
            this.url_grade_enh = this.server_url + '/tmp/nerve/grade_enh.png'
            this.load = false
            this.level_org = res.data.org
            this.level_enh = res.data.enh
          }
        )
    }
  }
}
</script>
<style lang="scss" scoped>
.chosen{
  margin-top: 5%;
}

.button{

  display: flex;
  flex-direction:column;
  justify-content: space-around;
  align-items:start;
}
.card1{
  height: 35%;
  margin-top: 5%;
  padding-bottom: 5%;
}
.card2{
  height: 55%;
  align-items:center;
}
.option{
  height: 40%;

  display: flex;
  flex-direction:row;
  flex-wrap: nowrap;
  margin-left: 0;
  align-items:center;
}
.col1{
  flex:1;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items:center;
}
.col2{
  flex:1;
}
.body1{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items:flex-start;
}
.body2{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-around;
}
.body3{
  display: flex;
  flex-direction:row;
  align-items: flex-start;
}
.input{
  margin-top: 5%;
  margin-bottom: 5%;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: space-around;
}
.corneal{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;

}
.dd{
  width: 100%;
  display: flex;
  flex-direction:column;
  align-items:center;
}
.demo-image__preview {
  width: 80%;
  aspect-ratio: 1 / 1;
  float: left;
  align-content: center;
  display: flex;
  flex-direction:column;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.o-image__preview {
  width: 55%;
  aspect-ratio: 1 / 1;
  float: left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.info_1 {
  margin-top: 5%;
  text-align: center;
  white-space: nowrap;
  background-color: unset;
  width: 70%;
}
.info_2 {
  white-space: nowrap;
  text-align: center;

  background-color: unset;
  width: 55%;
  margin-bottom: 10%;
}
.image {
  aspect-ratio: 1 / 1;
  background-color: unset;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
  display: flex;
  justify-content: center;
  align-items:center;
}
.image_1 {
  aspect-ratio: 1 / 1;
  background-color: unset;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.result_card{
}
.result{
  display: flex;
  flex-direction:column;
  align-items:center;
}
.row{
  flex: 1;
  height: 30%;
  width: 100%;
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10%;
}
.pic{
  flex: 1;

  flex-direction:column;
  justify-content:space-around;
  align-items:center;
}
</style>
